<template>
	<view class="gui-margin">
		<view style="margin-top:60rpx;">
			<text class="gui-h5 gui-color-gray gui-bold">工作日可约时段设置</text>
		</view>
		<view style="margin-top:15rpx;">
			<gui-select-list :items="lists2" iconSize="42rpx" :maxSize="2" @maxSed="maxSed" @change="change2"
				type="checkbox" checkedType="ring"></gui-select-list>
		</view>
		
		<view style="margin-top:60rpx;">
			<text class="gui-h5 gui-color-gray gui-bold">周末可约时段设置</text>
		</view>
		<view style="margin-top:15rpx;">
			<gui-select-list :items="lists3" iconSize="42rpx" :maxSize="2" @maxSed="maxSed" @change="change3"
				type="checkbox" checkedType="ring"></gui-select-list>
		</view>
	</view>
</template>
<script>
	// 模拟数据
	var face =
		"https://images.unsplash.com/photo-1604537466573-5e94508fd243?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw3MXx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=60"

	var demoData2 = [{
			title: "00:00~01:00",
			desc: "",
			checked: false
		},
		{
			title: "01:00~02:00",
			desc: "",
			checked: false
		},
		{
			title: "02:00~03:00",
			desc: "",
			checked: false
		},
		{
			title: "03:00~04:00",
			desc: "",
			checked: false
		},
		{
			title: "04:00~05:00",
			desc: "",
			checked: false
		},
		{
			title: "05:00~06:00",
			desc: "",
			checked: false
		},
		{
			title: "06:00~07:00",
			desc: "",
			checked: false
		},
		{
			title: "07:00~08:00",
			desc: "",
			checked: false
		},
		{
			title: "08:00~09:00",
			desc: "",
			checked: false
		},
		{
			title: "09:00~10:00",
			desc: "",
			checked: false
		},
		{
			title: "10:00~11:00",
			desc: "",
			checked: false
		},
		{
			title: "11:00~12:00",
			desc: "",
			checked: false
		},
		{
			title: "12:00~13:00",
			desc: "",
			checked: false
		},
		{
			title: "13:00~14:00",
			desc: "",
			checked: false
		},
		{
			title: "14:00~15:00",
			desc: "",
			checked: false
		},
		{
			title: "15:00~16:00",
			desc: "",
			checked: false
		},
		{
			title: "16:00~17:00",
			desc: "",
			checked: false
		},
		{
			title: "17:00~18:00",
			desc: "",
			checked: false
		},
		{
			title: "18:00~19:00",
			desc: "",
			checked: false
		},
		{
			title: "19:00~20:00",
			desc: "",
			checked: false
		},
		{
			title: "20:00~21:00",
			desc: "",
			checked: false
		},
		{
			title: "21:00~22:00",
			desc: "",
			checked: false
		},
		{
			title: "22:00~23:00",
			desc: "",
			checked: false
		},
		{
			title: "23:00~00:00",
			desc: "",
			checked: false
		},
	];

	var demoData3 = [{
			title: "00:00~01:00",
			desc: "",
			checked: false
		},
		{
			title: "01:00~02:00",
			desc: "",
			checked: false
		},
		{
			title: "02:00~03:00",
			desc: "",
			checked: false
		},
		{
			title: "03:00~04:00",
			desc: "",
			checked: false
		},
		{
			title: "04:00~05:00",
			desc: "",
			checked: false
		},
		{
			title: "05:00~06:00",
			desc: "",
			checked: false
		},
		{
			title: "06:00~07:00",
			desc: "",
			checked: false
		},
		{
			title: "07:00~08:00",
			desc: "",
			checked: false
		},
		{
			title: "08:00~09:00",
			desc: "",
			checked: false
		},
		{
			title: "09:00~10:00",
			desc: "",
			checked: false
		},
		{
			title: "10:00~11:00",
			desc: "",
			checked: false
		},
		{
			title: "11:00~12:00",
			desc: "",
			checked: false
		},
		{
			title: "12:00~13:00",
			desc: "",
			checked: false
		},
		{
			title: "13:00~14:00",
			desc: "",
			checked: false
		},
		{
			title: "14:00~15:00",
			desc: "",
			checked: false
		},
		{
			title: "15:00~16:00",
			desc: "",
			checked: false
		},
		{
			title: "16:00~17:00",
			desc: "",
			checked: false
		},
		{
			title: "17:00~18:00",
			desc: "",
			checked: false
		},
		{
			title: "18:00~19:00",
			desc: "",
			checked: false
		},
		{
			title: "19:00~20:00",
			desc: "",
			checked: false
		},
		{
			title: "20:00~21:00",
			desc: "",
			checked: false
		},
		{
			title: "21:00~22:00",
			desc: "",
			checked: false
		},
		{
			title: "22:00~23:00",
			desc: "",
			checked: false
		},
		{
			title: "23:00~00:00",
			desc: "",
			checked: false
		},
	];

	export default {
		data() {
			return {
				lists: [],
				lists2: [],
				lists3: []
			}
		},
		onLoad: function() {
			// 模拟 api 请求
			setTimeout(() => {
				this.lists3 = demoData3;
				this.lists2 = demoData2;
			}, 100);
		},
		methods: {
			change1: function(e) {
				console.log(e);
			},
			change2: function(e) {
				console.log(e);
			},
			change3:function(e){
				console.log(e);
			},
			maxSed: function() {
				uni.showToast({
					title: '最多可以选择2个哦',
					icon: 'none'
				})
			}
		}
	}
</script>
<style>
</style>